{%extends 'layout.admin.html'%}
{%block content%}
{% load authfilters %}

<div class="page-header d-print-none">
  <div class="container-xl">
    <div class="row g-2 align-items-center">
      <div class="col">
        <h1 class="page-title">Free Online Cookie Formatter - Convert Cookie Header to JSON</h1>
      </div>
      <div class="seo-h1">
        <h2>Cookie Header to JSON Parser</h2>
        <h2>Key Features
            <ul>
                <li>Instantly parse HTTP Cookie header into structured JSON.</li>
                <li>Automatically trims whitespace and decodes URL encoded values.</li>
                <li>Duplicate keys preserved optionally (shown in array when repeated).</li>
                <li>Client-side only: privacy friendly.</li>
                <li>One-click copy & clear.</li>
            </ul>
        </h2>
        <h2>How to Use?
            <ul>
                <li>Paste the full Cookie header string (e.g. name=value; theme=light; sessionToken=abc).</li>
                <li>Click "Format" or type to see live JSON output.</li>
                <li>Use Copy button to copy JSON.</li>
            </ul>
        </h2>
      </div>
    </div>
  </div>
</div>

<style type="text/css">
.cookie-container { margin-bottom: 1rem; }
.cookie-textarea {
    border: 1px solid #2a2b2d; border-radius: 8px; background-color: #1e2022; color:#ffffff;
    font-family: 'Monaco','Menlo','Ubuntu Mono', monospace; font-size:14px; line-height:1.5; padding:12px; resize:vertical; width:100%; min-height:150px;
}
.cookie-textarea:focus { outline:none; border-color:#0054a6; box-shadow:0 0 0 2px rgba(0,84,166,0.2); }
.cookie-textarea::selection { background:#0054a6; color:#fff; }
#jsonOutput::selection { background:#0054a6; color:#fff; }
.pre-json { white-space: pre; background:#1e2022; padding:12px; border:1px solid #2a2b2d; border-radius:8px; font-size:14px; font-family:'Monaco','Menlo','Ubuntu Mono',monospace; color:#ffffff; min-height:150px; }
.char-count { font-size:12px; color:#6c757d; margin-top:4px; }
</style>

<div class="page-body">
  <div class="container-xl">
    <div class="card">
      <div class="card-body">
        <div class="row">
          <div class="col-md-6">
            <div class="cookie-container">
              <label class="form-label">Cookie Header</label>
              <textarea id="cookieInput" class="cookie-textarea" placeholder="Paste Cookie header here..." rows="15"></textarea>
              <div class="char-count">Characters: <span id="inputCount">0</span></div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="cookie-container">
              <label class="form-label">JSON Output</label>
              <textarea id="jsonOutput" class="cookie-textarea" readonly rows="15"></textarea>
              <div class="char-count">Characters: <span id="outputCount">0</span></div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

<script type='text/javascript'>
(function(){
  const input = document.getElementById('cookieInput');
  const output = document.getElementById('jsonOutput');
  const inputCount = document.getElementById('inputCount');
  const outputCount = document.getElementById('outputCount');

  function updateCounts(){
    inputCount.textContent = input.value.length;
    outputCount.textContent = output.value.length;
  }

  function parseCookie(str){
    const result = {};
    const duplicates = {};
    str.split(';').forEach(part => {
      if(!part.trim()) return;
      const idx = part.indexOf('=');
      let key, val;
      if(idx === -1){
        key = part.trim();
        val = '';
      } else {
        key = part.slice(0, idx).trim();
        val = part.slice(idx+1).trim();
      }
      try { val = decodeURIComponent(val); } catch(e) {}
      if(result.hasOwnProperty(key)){
        if(!duplicates[key]) duplicates[key] = [result[key]];
        duplicates[key].push(val);
      } else {
        result[key] = val;
      }
    });
    // Merge duplicates into arrays
    Object.keys(duplicates).forEach(k => { result[k] = duplicates[k]; });
    return result;
  }

  function format(){
    const raw = input.value.trim();
    if(!raw){ output.value=''; updateCounts(); return; }
    const obj = parseCookie(raw);
    output.value = JSON.stringify(obj, null, 2);
    updateCounts();
  }

  input.addEventListener('input', format);
})();
</script>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "Free Online Cookie Formatter",
  "applicationCategory": "DeveloperApplication",
  "operatingSystem": "Any",
  "offers": {"@type": "Offer", "price": "0", "priceCurrency": "USD"},
  "description": "Convert HTTP Cookie header string into structured JSON instantly.",
  "keywords": "cookie, formatter, parser, json, online tool"
}
</script>
{%endblock%}